<template>
<view >
	<uni-nav-bar dark left-icon="left" :fixed="true" title="MBTI测试结果" background-color="#fff" color="#22242A" @clickLeft="goBack()" />
	<view class="test-result" v-if="personality.id">
		<view class="result">
			<view class="time">
				<text>{{completionTime}}
				你的MBTI性格类型为</text>
			</view>
			<view class="type">
				{{personality.name.split('人格')[0]}}<text>/{{personality.type}}</text>
			</view>
		</view>
		<view class="content">
			<view class="cont-tips">
				<text>{{personality.brief}}</text>
				<image class="yh" src="/static/mbti/yh.png" mode="aspectFill"></image>
			</view>
			<view class="c-title2">
				<image src="/static/mbti/title1.png" mode="aspectFill"></image>
				<text>性格构成</text>
				<image src="/static/mbti/title2.png" mode="aspectFill"></image>
			</view>
			<view class="org">
				<view class="org-item" v-for="(item, i) in org_list" :key="i">
					<text class="res">{{item.res1}}</text>
					<view class="progress_bar">
						<text class="value" :class="item.value.position==1?'left':'right'">{{item.value.position==1?item.value.val1:item.value.val2}}%</text>
						<view class="pb-left" :style="{opacity: item.value.position==1?1:0.2}">
							<text class="pb-line" :style="{width: `${item.value.val1}%`}"></text>
						</view>
						<view class="pb-right" :style="{opacity: item.value.position==2?1:0.2}">
							<text class="pb-line" :style="{width: `${item.value.val2}%`}"></text>
						</view>
					</view>
					<text class="res">{{item.res2}}</text>
				</view>
			</view>
		</view>
		<view class="test-desc">
			<view class="title2">
				<text>人格介绍</text>
			</view>
			<view class="desc-content">
				<view v-html="personality.brief1">
				</view>
				<view class="title3 black">· {{personality.topic2}}</view>
				<view class="" v-html="personality.brief2"></view>
				<view class="title3 black">· {{personality.topic3}}</view>
				<view v-html="personality.brief3">
					
				</view>
			</view>
		</view>
		<view class="rep-figure">
			<view class="title2">
				<text>代表人物</text>
			</view>
			<view class="rep-list">
				<view class="rep-info" v-for="item in 4" :class="item" :key="item">
					<view class="head">
						<image src="/static/u68.png" mode="aspectFill"></image>
						<image class="sex" src="/static/mbti/sex1.png" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view style="font-weight: 600;color: #10141A;">妮可·基德曼</view>
						<text style="font-size: 24rpx;">好莱坞演员</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="text-now">
			<view class="text-now-box">
				<text class="text-now-btn" @click="share()">立即分享</text>
			</view>
		</view>
	</view>
</view>
</template>
<script>
export default {
	data() {
		return {
			personality: {},
			resCount: {},
			org_list: [],
			testNum: 0,
			completionTime: ''
		}   
	},
	onLoad() {
		this.mbtiPersonality()
	},
	methods: {
		timeHandle(time){
			
			if(!time) return
			let str = time.split(' ')[0];
			str = str.split('-').join('.');
			return str
		},
		mbtiPersonality(){
			this.api.get('mbti/findProgress').then(res=>{
				if(res.data.state !='ok')return
				this.personality = res.data.mbtiPersonality;
				if(!this.personality) return;
				this.testNum = res.data.num;
				let myProgress = res.data.myProgress || {}
				let resCount = myProgress.resCount
				if(resCount){
					this.completionTime = this.timeHandle(myProgress.updateTime || myProgress.addTime)
					resCount = JSON.parse(resCount)
					let handle = (a, b)=>{
						let val1 = a/(a+b),
						val2 = b/(a+b);
						val1 = parseInt(val1*100)
						val2 = parseInt(val2*100)
						return {val1, val2, position: a>b?1:2}
					}
					this.org_list = [
						{res1: 'E外向', res2: 'I内向', value: handle(resCount['E'], resCount['I'])},
						{res1: 'S实感', res2: 'N直觉', value: handle(resCount['S'], resCount['N'])},
						{res1: 'T思考', res2: 'F情感', value: handle(resCount['T'], resCount['F'])},
						{res1: 'J判断', res2: 'P知觉', value: handle(resCount['J'], resCount['P'])},
					]
				}
				
			})
		},
		goBack(){
			let userInfo = getApp().globalData.userInfo
			let path = ''
			if(userInfo.user_type==2){
				path = '/pages/student/personal'
			}else{
				path = '/pages/teachers/personal'
			}
			
			uni.switchTab({
				url: path
			})
		},
		share(){
			let cont = {img: '/static/mbti/share-img.jpg', 
				icon: '/static/mbti/share-icon.png',
				num: `${this.testNum}人测试过`,
				text: '[MBTI职业性格测试]世界级权威职业性格测试，快来试试吧~',
				path: '/pages/MBTI/test-home',
				from: 'MBTI测试'
			}
			let item = {msgType: 6, content: JSON.stringify(cont)}
			uni.setStorageSync('xdrelayMsg', item)
			uni.navigateTo({
				url: '/pages/noticeInfo/recent-contacts'
			})
		}
	}
}
</script>
<style lang="less" scoped>
	.test-result{
		padding: 0 32rpx;
		background-image: url(~@/static/mbti/export-bg.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 0 0;
	}
	.result{
		display: flex;
		justify-content: space-between;
		padding-top: 76rpx;
	}
	.time{
		color: #22242A;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 58rpx;
		border-bottom: 2rpx solid #22242A;
	}
	.type{
		display: inline-block;
		width: 300rpx;
		height: 108rpx;
		line-height: 108rpx;
		border-radius: 54rpx 54rpx 54rpx 0;
		font-size: 48rpx;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		background: linear-gradient(45deg, #26A0C4, #28C2CD);
		text{
			font-size: 28rpx;
		}
	}
	.content{
		margin-top: 60rpx;
		padding: 64rpx 52rpx 54rpx;
		background-color: #fff;
		border-radius: 32rpx;
		text-align: center;
		box-shadow: 0 0 21rpx 0 rgba(235, 235, 235, .5);
	}
	.cont-tips{
		display: flex;
		justify-content: center;
		line-height: 48rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		text-align: left;
		image{
			align-self: flex-end;
			width: 27rpx;
			height: 22rpx;
		}
	}
	.c-title2{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 54rpx;
		image{
			width: 34rpx;
			height: 10rpx;
		}
		text{
			margin: 0 14rpx;
			color: #999;
			font-size: 24rpx;
		}
	}
	.org{
		margin-top: 36rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.org-item{
		margin-top: 46rpx;
		display: flex;
		align-items: center;
	}
	.res{
		display: inline-block;
		width: 72rpx;
		white-space: nowrap;
	}
	.progress_bar{
		position: relative;
		margin: 0 24rpx;
		width: 320rpx;
		display: flex;
		
		align-items: center;
		
		border-radius: 4rpx;
	}
	.value{
		position: absolute;
		padding: 0 16rpx;
		// right: 0;
		bottom: 28rpx;
		width: 50%;
		
		font-size: 20rpx;
		color: #333333;
		box-sizing: border-box;
		&.left{
			left: 0;
			text-align: right;
		}
		&.right{
			right: 0;
			text-align: left;
		}
	}
	.pb-left, .pb-right{
		height: 28rpx;
		border: 5rpx solid #262E3F;
		width: 50%;
		box-sizing: border-box;
		font-size: 0;
	}
	.pb-left{
		border-right: none;
		text-align: right;
		border-radius: 4rpx 0 0 4rpx;
	}
	.pb-right{
		
		border-left: none;
		text-align: left;
		border-radius: 0 4rpx 4rpx 0;
	}
	.pb-line{
		display: inline-block;
		width: 50%;
		height: 100%;
		background-color: #28C2CD;
	}
	
	.test-desc{
		margin-top: 80rpx;
	}
	.title2{
		text-align: center;
		
		
		text{
			position: relative;
			font-size: 30rpx;
			color: #555;
			font-weight: bold;
			&::after{
				position: absolute;
				content: '';
				left: -13rpx;
				right: -13rpx;
				bottom: 0;
				height: 8rpx;
				border-radius: 2rpx;
				background-color: #28C2CD;
				opacity: .39;
				
			}
		}
	}
	
	.desc-content{
		margin-top: 40rpx;
		padding: 36rpx 32rpx;
		background-image: url(~@/static/mbti/bg.png);
		background-size: cover;
		background-position: 0;
		color: #999;
		line-height: 42rpx;
		font-size: 26rpx;
		white-space: pre-line;
		.black{
			color: #262E3F;
		}
		.tips{
			margin-top: 50rpx;
			color: #FF9767;
		}
	}
	.title3{
		margin-top: 40rpx;
	}
	// 代表人物
	.rep-figure{
		margin: 60rpx 0 9rpx;
	}
	.rep-list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 43rpx;
		// image{
		// 	width: 370rpx;
		// 	height: 198rpx;
		// }
	}
	.rep-info{
		width: 328rpx;
		height: 156rpx;
		padding: 32rpx;
		border-radius: 32rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		box-shadow: 0 0 21rpx 0 rgba(235, 235, 235, .5);
		box-sizing: border-box;
		margin-bottom: 30rpx;
		.head{
			width: 88rpx;
			height: 88rpx;
			background-color: #fff;
			padding: 4rpx;
			border-radius: 44rpx;
			box-shadow: 0 8rpx 8rpx 0 rgba(21, 26, 33, .1);
			box-sizing: border-box;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 44rpx;
			}
			.sex{
				position: absolute;
				bottom: 0%;
				right: 0;
				width: 28rpx;
				height: 28rpx;
				border-radius: 0;
			}
		}
		.name{
			margin-left: 18rpx;
			color: #8E9199;
		}
	}
	.text-now{
		margin-top: 51rpx;
		height: 142rpx;
		
	}
	.text-now-box{
		position: fixed;
		height: 142rpx;
		background-color: #fff;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		bottom: 0;
		box-shadow: 0 2rpx 6rpx 0 rgba(208, 208, 208, .5);
	}
	.text-now-btn{
		display: block;
		margin: 24rpx 32rpx;
		height: 94rpx;
		line-height: 94rpx;
		background-color: #28C2CD;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}
</style>